<template>
	<div class='pages book-list'>
		<div class='book-list-body'>
			<div class='book-item' v-for="(item, index) in data" :key="item.id">
				<div class='pic-wrap'>
					<img :src="item.cover" alt="item.name" />
					<i class='num'>{{ index + 1 }}</i>
				</div>

				<div class='info'>
					<p class='t'>{{ item.name }}</p>
					<p class='tag'>{{ item.taxonomy }}</p>
					<p class='desc'>
						{{ item.description }}
					</p>
					<p class='btn-wrap' style='margin-top: 8px'>
						<i-button type="success" @click="toReading(item.id)">继续阅读</i-button>
    					<i-button type="warning" @click="cancelCollection(item.id)" v-if="!activeTab">取消收藏</i-button>
    					<i-button type="warning" @click="cancelRecord(item.id)" v-else>删除足迹</i-button>
					</p>
				</div>
			</div>
			<prompt :prompt="prompt"></prompt>
		</div>


		<div class='bottom'>
			<div class='bottom-item' v-for="(item, index) in bottoms" :key="item.id" :class="{
				'active': activeTab == index}" @click="to(item, index)">
				<Icon :type="item.icon" class='icon'></Icon>
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import DefaultWrap  from 'base/default-wrap'
	import Prompt 		from 'base/prompt'

	export default{
		data() {
			return {
				bottoms 	: [{
					icon 	: 'android-favorite',
					to   	: '/book/lists?status=0',
					name    : '我的书架'
				},{
					icon 	: 'ios-bookmarks-outline',
					to   	: '/book/lists?stat us=1',
					name    : '最近阅读'
				}],
				data  		: [],
				params 		: {
					status  : 0,
					p  		: 1,
					limit 	: 8,
					model 	: 1,
					type    : 'book'
 				},
				prompt      : {
					hidden	: false,
					loading : false,
					title   : '分类列表',
					text    : '空空如也'
				},
				isShow      : 1,
				activeTab   : 0,
				
			}
		},	
		created() {
			let status 				= this.$route.query.status
			this.activeTab          = status   
			this.getDataByStatus(status)
		},
		methods: {
			getDataByStatus(status) {
				let prompt 				= this.prompt
				let params 				= this.params
					params.status 		= status
					prompt.loading 		= !0
					prompt.hidden 		= !1
 				this.HttpService.getDataByStatus(params).then(data => {
					let d 				= data.data
					prompt.loading  	= !1
	
					this.data 			= d

					if(!d || !d.length) {
						prompt.hidden 	= !0
					}
				})
			},
			to(item, index) {
				if(index == this.activeTab) return
				this.activeTab = index
					this.prompt.title = !this.activeTab ? '我的书架' : '我的足迹'
				this.$router.push('/book/lists?status=' + index)
				this.getDataByStatus(index)
			},
			toReading(id) {
				this.addClickNum(id)
				this.$router.push('/reading/index?id=' + id)
			},
			addClickNum(id) {
				this.HttpService.addClickNum({id: id})
			},
			cancelCollection(id) {
				this.HttpService.cancelByModel({id: id, status: 0, type: 'book'}).then(data => {
					if(!data.status) {
						this.delData(id)
						this.$Message.success('取消收藏成功')
					} else {
						this.$Message.error('取消失败啦')
					}
 				})
			},
			cancelRecord(id) {
				this.HttpService.cancelByModel({id: id, model: 1}).then(data => {
					if(!data.status) {
						this.delData(id)
						this.$Message.success('删除足迹成功')
					} else {
						this.$Message.error('删除失败啦')
					}
 				})
			},
			delData(id) {
				let list = this.data
				let arr  = [];
				list.forEach(n => {
					console.log(n, n.id)
					if(n.id != id)
						arr.push(n)
				})
				if(!arr.length)
					this.prompt.hidden = !0
				this.data = arr
			}
		},
		watch: {
		},
		components: {
			Prompt
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0

		        
	.bottom
		display: flex
		position: fixed
		left: 0
		right: 0
		bottom: 0
		height: 50px
		justify-content: center
		align-items: center	
		text-align: center
		border-top: 1px solid $mc
		background-color: #FFF
		.icon
			width: 100%
			font-size: 16px
		.bottom-item
			position: relative
			flex: 1
			&.active
				color: $mc
		&:after
			content: ''
			position: absolute
			left: 50%
			top: 0
			bottom: 0
			width: 1px
			background-color: $mc
	.book-list-body
		position: absolute
		left: 0
		top: 0
		right: 0
		bottom: 50px
		padding: 10px
		overflow-y: scroll
		background-color: #FFF
		.book-item
			margin-bottom: 8px
			overflow: hidden
			.pic-wrap
				box-sizing: border-box
				float: left
				width: 100px
				border: 1px solid $mc
				img
					width: 100%
					height: 128px
			.info
				margin-left: 110px
				color: #999
				.t
					color: #222
					font-size: 15px
				.tag
					margin-top: 4px
				.desc
					height: 40px
					text-align: justify
					margin-top: 6px
					line-height: 20px	
					overflow: hidden
				.btn-wrap
					button
						margin-right: 4px		
		.cover
			position: absolute
			left: 0
			right: 0
			bottom: 0
			top: 0	

		.loading
			position: absolute
			left: 0
			right: 0
			top: 0
			bottom: 0
			z-index: 999
			width: auto
			height: auto
	
	.move-enter-active, .move-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.move-enter
		transform: translate3d(100%, 0, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
</style>